<script setup lang="ts">
definePage({
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    usingComponents: {
      'xr-template-ar-preview-load': '../../wxcomponents/xr-template-ar-preview-load',
    },
  },
})

const width = ref(300)
const height = ref(300)
const renderWidth = ref(300)
const renderHeight = ref(300)

const gltfSrc = ref('')

onLoad(() => {
  width.value = uni.getWindowInfo().windowWidth
  height.value = uni.getWindowInfo().windowHeight
  const dpi = uni.getWindowInfo().pixelRatio
  renderWidth.value = width.value * dpi
  renderHeight.value = height.value * dpi

  gltfSrc.value = 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/just_a_girl/index.glb'
  // gltfSrc.value = 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/damage-helmet/index.gltf'
})

const captureState = ref(0)

function handleClick() {
  captureState.value = 1
  setTimeout(() => {
    captureState.value = 0
  }, 1000)
}
</script>

<template>
  <view class="content">
    <xr-template-ar-preview-load id="main-frame" :src="gltfSrc" :capture-state="captureState" :width="renderWidth" :height="renderHeight" :style="`width:${width}px;height:${height}px;top:0px;left:0px;display:block;`" />
    <view class="btn" :style="{ background: captureState ? 'blue' : 'red' }" @click="handleClick">
      点击
    </view>
  </view>
</template>

<style scoped lang="scss">
.content {
  position: relative;
}
.btn {
  text-align: center;
  line-height: 50px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: red;
  z-index: 999;
}
</style>
